<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>诗词学习应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513', // 棕色主色调，代表中国风
            secondary: '#D2B48C', // 棕褐色辅助色
            accent: '#A52A2A', // 深红色强调色
            light: '#F5F5DC', // 米色背景
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Noto Serif SC', 'serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .poem-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 300ms ease;
        &:hover {
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
      }
      .btn-primary {
        background-color: #8B4513;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 300ms ease;
        &:hover {
          background-color: rgba(139, 69, 19, 0.8);
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.5);
        }
      }
      .btn-secondary {
        background-color: #D2B48C;
        color: #8B4513;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        transition: all 300ms ease;
        &:hover {
          background-color: rgba(210, 180, 140, 0.8);
        }
        &:focus {
          outline: none;
          box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.5);
        }
      }
      .nav-item {
        color: white;
        transition: color 300ms ease;
        &:hover {
          color: #D2B48C;
        }
      }
      .animate-fadeIn {
        animation: fadeIn 0.5s ease-in-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
    }
  </style>
</head>
<body class="bg-light min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-primary text-white shadow-lg sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-book text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold">拾光诗栈</h1>
      </div>
      
      <div class="hidden md:flex space-x-8">
        <a href="index.html" class="nav-item flex items-center"><i class="fa fa-home mr-2"></i>首页</a>
        <a href="browse.html" class="nav-item flex items-center"><i class="fa fa-list mr-2"></i>诗词库</a>
        <a href="plan.html" class="nav-item flex items-center"><i class="fa fa-calendar mr-2"></i>学习计划</a>
        <a href="favorite.html" class="nav-item flex items-center"><i class="fa fa-heart mr-2"></i>我的收藏</a>
        <a href="login.html" class="nav-item flex items-center"><i class="fa fa-sign-in mr-2"></i>登录</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <button id="mobile-menu-btn" class="md:hidden text-white focus:outline-none">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-primary/95 backdrop-blur-md hidden animate-fadeIn">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <a href="index.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-home mr-2 w-5"></i>首页
        </a>
        <a href="browse.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-list mr-2 w-5"></i>诗词库
        </a>
        <a href="plan.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-calendar mr-2 w-5"></i>学习计划
        </a>
        <a href="favorite.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-heart mr-2 w-5"></i>我的收藏
        </a>
        <a href="login.html" class="nav-item py-2 flex items-center">
        <i class="fa fa-sign-in mr-2 w-5"></i>登录
        </a>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 欢迎区域 -->
    <section class="mb-12 text-center">
      <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-serif font-bold text-primary mb-4">欢迎来到拾光诗栈</h2>
      <p class="text-gray-700 max-w-2xl mx-auto text-lg">探索中国古典诗词的魅力，感受千年文化的积淀，提升文学素养</p>
      
      <div class="mt-8 flex flex-wrap justify-center gap-4">
        <a href="browse.html" class="btn-primary flex items-center">
          <i class="fa fa-book mr-2"></i>浏览诗词库
        </a>
        <a href="plan.html" class="btn-secondary flex items-center">
          <i class="fa fa-calendar-check-o mr-2"></i>制定学习计划
        </a>
      </div>
    </section>
    
    <!-- 特色诗词 -->
    <section class="mb-12">
      <h3 class="text-2xl font-bold text-primary mb-6 flex items-center">
        <i class="fa fa-star text-accent mr-2"></i>特色推荐
      </h3>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="featured-poems">
        <!-- 诗词卡片将由JavaScript动态生成 -->
      </div>
    </section>
    
    <!-- 分类浏览 -->
    <section class="mb-12">
      <h3 class="text-2xl font-bold text-primary mb-6 flex items-center">
        <i class="fa fa-th-large mr-2"></i>分类浏览
      </h3>
      
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="browse.html?dynasty=tang" class="bg-white rounded-lg shadow-md p-6 text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <i class="fa fa-leaf text-3xl text-accent mb-3"></i>
          <h4 class="font-bold">唐诗</h4>
        </a>
        <a href="browse.html?dynasty=song" class="bg-white rounded-lg shadow-md p-6 text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <i class="fa fa-snowflake-o text-3xl text-accent mb-3"></i>
          <h4 class="font-bold">宋词</h4>
        </a>
        <a href="browse.html?dynasty=yuan" class="bg-white rounded-lg shadow-md p-6 text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <i class="fa fa-music text-3xl text-accent mb-3"></i>
          <h4 class="font-bold">元曲</h4>
        </a>
        <a href="browse.html?dynasty=ming" class="bg-white rounded-lg shadow-md p-6 text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
          <i class="fa fa-pagelines text-3xl text-accent mb-3"></i>
          <h4 class="font-bold">明诗</h4>
        </a>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">诗词学习</h3>
          <p class="text-gray-300">探索中国古典诗词的魅力，感受千年文化的积淀，提升文学素养。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-github text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="index.html" class="text-gray-300 hover:text-white transition-colors duration-300">首页</a></li>
            <li><a href="browse.html" class="text-gray-300 hover:text-white transition-colors duration-300">诗词库</a></li>
            <li><a href="plan.html" class="text-gray-300 hover:text-white transition-colors duration-300">学习计划</a></li>
            <li><a href="favorite.html" class="text-gray-300 hover:text-white transition-colors duration-300">我的收藏</a></li>
            <li><a href="login.html" class="text-gray-300 hover:text-white transition-colors duration-300">登录</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-envelope-o mt-1 mr-2"></i>
              <span class="text-gray-300">contact@shicixuexi.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone mt-1 mr-2"></i>
              <span class="text-gray-300">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span class="text-gray-300">北京市海淀区中关村南大街5号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2025 诗词学习平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });
    
    // 模拟数据 - 特色推荐诗词
    const featuredPoems = [
      {
        id: 1,
        title: "静夜思",
        dynasty: "唐",
        author: "李白",
        content: "床前明月光，疑是地上霜。\n举头望明月，低头思故乡。",
        category: "思乡"
      },
      {
        id: 2,
        title: "春望",
        dynasty: "唐",
        author: "杜甫",
        content: "国破山河在，城春草木深。\n感时花溅泪，恨别鸟惊心。\n烽火连三月，家书抵万金。\n白头搔更短，浑欲不胜簪。",
        category: "爱国"
      },
      {
        id: 3,
        title: "相见欢",
        dynasty: "五代",
        author: "李煜",
        content: "无言独上西楼，月如钩。\n寂寞梧桐深院锁清秋。\n剪不断，理还乱，是离愁。\n别是一般滋味在心头。",
        category: "离愁"
      }
    ];
    
    // 渲染特色诗词
  const featuredPoemsContainer = document.getElementById('featured-poems');
featuredPoems.forEach(poem => {
  const poemCard = document.createElement('div');
  poemCard.className = 'poem-card relative'; // 添加relative定位
  poemCard.innerHTML = `
    <div class="flex justify-between items-start mb-3">
      <h4 class="text-lg font-bold text-primary">${poem.title}</h4>
      <span class="text-sm text-gray-500">${poem.dynasty}·${poem.author}</span>
    </div>
    <p class="text-gray-700 mb-3 line-clamp-3 font-serif">${poem.content.replace(/\n/g, '<br>')}</p>
    <a href="detail.html?id=${poem.id}" class="text-accent hover:underline flex items-center">
      阅读全文 <i class="fa fa-angle-right ml-1"></i>
    </a>
    <span class="absolute bottom-2 right-2 bg-secondary text-white px-2 py-1 rounded text-xs">${poem.category}</span> <!-- 新增category标签 -->
  `;
  featuredPoemsContainer.appendChild(poemCard);
});
    
    
    // 页面加载动画
    document.addEventListener('DOMContentLoaded', function() {
      document.body.classList.add('animate-fadeIn');
    });
  </script>
</body>
</html>